<template>
  <div class="guidang">
    <section class="wboxnoborder">
      <div style="margin-right:20px;">
        <table class="mytable1" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <th rowspan="2" width='100'>序号</th>
            <th rowspan="2" width='200'>环节</th>
            <th rowspan="2" width='300'>档案名称</th>
            <th width='400' colspan="4">归档类型</th>
          </tr>
          <tr>
            <th width='100' v-if="role===1" style="color:blue"><b>选任档案</b></th>
            <th width='100' v-else>选任档案</th>
            <th width='100' v-if="role===2" style="color:blue"><b>监督档案</b></th>
            <th width='100' v-else>监督档案</th>
            <th width='100' v-if="role===2" style="color:blue"><b>干部档案</b></th>
            <th width='100' v-else>干部档案</th>
            <th width='100' v-if="role===3" style="color:blue"><b>文书档案</b></th>
            <th width='100' v-else>文书档案</th>
          </tr>
          <tr v-for="(item,index) in gdData" :key="index">
            <td>{{index+1}}</td>
            <td v-if="rowspan[index]" :rowspan="rowspan[index]">{{item.stepName}}</td>
            <td>{{item.archiveName}}</td>
            <td>
              <div v-if="item.selectionState||item.selectionState===0">
                <img v-if="role===1&&item.selectionState===1" :src="gdState(item.selectionState)" @click="handleImgClick(item,1)" style="cursor:pointer">
                <img v-else :src="gdState(item.selectionState)">
              </div>
              <div v-else style="width:100%;background:#eee;height:40px;"></div>
            </td>
            <td>
              <div v-if="item.supervisionState||item.supervisionState===0">
                <img v-if="role===2&&item.supervisionState===1" :src="gdState(item.supervisionState)" @click="handleImgClick(item,2)" style="cursor:pointer">
                <img v-else :src="gdState(item.supervisionState)">
              </div>
              <div v-else style="width:100%;background:#eee;height:40px;"></div>
            </td>
            <td>
              <div v-if="item.cadreState||item.cadreState===0">
                <img v-if="role===2&&item.cadreState===1" :src="gdState(item.cadreState)" @click="handleImgClick(item,3)" style="cursor:pointer">
                <img v-else :src="gdState(item.cadreState)">
              </div>
              <div v-else style="width:100%;background:#eee;height:40px;"></div>
            </td>
            <td>
              <div v-if="item.fileState||item.fileState===0">
                <img v-if="role===3&&item.fileState===1" :src="gdState(item.fileState)" @click="handleImgClick(item,4)" style="cursor:pointer">
                <img v-else :src="gdState(item.fileState)">
              </div>
              <div v-else style="width:100%;background:#eee;height:40px;"></div>
            </td>
          </tr>
        </table>
      </div>
    </section>
  </div>
</template>

<script>
// import gd from '../../assets/icon_selection_gd0.png'
import gd1 from '../../assets/icon_selection_gd1.gif'
import gd2 from '../../assets/icon_selection_gd2.png'
import gd3 from '../../assets/icon_selection_index-1.png'
export default {
  props: ['personId', 'timestamp'],
  watch: {
    personId: {
      handler (val, oldVal) {
        console.log('newval:' + val)
        this.getGdData()
      },
      immediate: true
    },
    timestamp: {
      handler (val, oldVal) {
        console.log('newval:' + val)
        this.getGdData()
      },
      immediate: true
    }
  },
  name: 'guidang',
  data () {
    return {
      subitem: ['选任档案', '监督档案', '干部档案', '文书档案'],
      rowspan: [6, 0, 0, 0, 0, 0, 4, 0, 0, 0, 4, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 2, 0, 3, 0, 0, 1],
      gdData: [],
      allStatusid: 0,
      allStatus: '',
      status: '',
      status2: '',
      status3: '',
      status4: '',
      fs: 0,
      fs2: 0,
      fs3: 0,
      fs4: 0,
      fdata: {},
      role: 0
    }
  },
  methods: {
    gdState (id) {
      switch (id) {
        case 0:
          // return gd
          return ''
        case 1:
          return gd1
        case 2:
          return gd2
        case 3:
          return gd3
      }
    },
    getGdData (pid) {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = this.$http.defaults.selectionAPI + 'api/busPersonArchive/queryByPerson'
      // console.log(url)
      this.$http.post(url, {
        personId: this.personId
      }).then(res => {
        console.log('get finish data succ:', res)
        if (res.data.success) {
          loading.close()
          this.gdData = res.data.result
          console.log(JSON.stringify(this.gdData))
        } else {
          loading.close()
          this.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
      this.getGdRole()
    },
    getGdRole () {
      let unitName = localStorage.getItem('unitName')
      let role = localStorage.getItem('Roles')
      if (role.indexOf('ROLE_banshirenyuan') > -1) {
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/selection/auth/queryArchiveItems`)
          .then(response => {
            if (response.data.success) {
              if (response.data.result.authorized) {
                if (unitName === '干部一处' || unitName === '干部二处' || unitName === '干部三处') {
                  this.role = 1
                }
                if (unitName === '干部监督处') {
                  this.role = 2
                }
                if (unitName === '综合处') {
                  this.role = 3
                }
              }
            } else {
              this.$message({
                message: '读取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.$message({
              message: '网络读取失败:' + error,
              type: 'error'
            })
          })
      }
    },
    inRoles (str) {
      let userRoles = JSON.parse(localStorage.getItem('Roles'))
      if (userRoles.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    // 判断当前用户是否有该项归档权限
    isRoleUser (index) {
      localStorage.getItem('Roles')
    },
    handleImgClick (data, index) {
      this.$confirm('确定要完成 “' + data.archiveName + '” 归档信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let url = this.$http.defaults.selectionAPI + 'api/busPersonArchive/updateByPerson'
        // console.log(url)
        this.$http.post(url, {
          id: data.id,
          index: index,
          state: 2
        }).then(res => {
          console.log('归档succ:', res)
          if (res.data.success === true) {
            loading.close()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getGdData()
          } else {
            loading.close()
            this.$message({
              message: '操作失败',
              type: 'error'
            })
          }
        })
      })
    }
  }
}
</script>

<style>
.guidang .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.guidang .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.guidang .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.guidang .el-table__row{
  height: 50px;
}
</style>
<style scoped>
.guidang {
  width: 100%;
}
.tit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: bolder;
  margin:0 10px;
}
.tit2 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin:0 10px;
}
.tit2-left {
  font-weight: bolder;
}
.tit2-img {
  width: 30px;
  height: 30px;
}
.ir2-img {
  width: 30px;
  height: 30px;
}
.item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}
.item-left {
  width: 150px;
  text-align: right;
}
.item-right {
  width: 60%;
  margin-left:15px;
  font-weight: bolder;
}
.item-right2 {
  width: 60%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.item-right2-con {
  margin-left: 10px;
  float:left;
  line-height: 20px;
}
.line {
  width: 100%;
  height: 1px;
  background-color: #74A6CC;
  margin-top: 20px;
  overflow: hidden;
}
.guidang .wboxnoborder {
  padding: 0;
  width: 100%;
  background-color: #fff;
  margin: 0 10px;
  overflow: hidden;
}
.guidang .item{
  font-size:var(--size16);
}
.guidang .mytable1 {
  border-left: #95B8E7 solid 1px;
  border-top: #95B8E7 solid 1px;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
}
.guidang .mytable1 th{
  font-weight: normal;
  background-image: -webkit-gradient(linear , left top, left bottom , from(#f8f8f8), to(#efefef));
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height: 30px;
  background: #F5F7FA;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  height:40px;
}
.guidang .mytable1 td{
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  height:40px;
}
</style>
